﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>转移调拨管理</title>
    <link rel="stylesheet" href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css">
    <style>
        /* 整体页面样式 */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden; /* 禁用外部滚动条 */
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            font-family: 'Microsoft YaHei', Arial, sans-serif;
        }
        
        .main-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            width: calc(85% - 20px); /* 从100%缩小到85% */
            max-width: 1200px; /* 从1380px缩小到1200px */
            height: calc(100vh - 20px); /* 固定高度为视窗高度减去边距 */
            margin: 10px auto;
            min-width: 1100px; /* 从1280px缩小到1100px */
            display: flex;
            flex-direction: column;
            overflow: hidden; /* 容器本身不滚动 */
        }
        
        /* 搜索表单优化 */
        .search-section {
            background: #f8fafc;
            border-radius: 12px;
            padding: 12px 18px; /* 稍微减少内边距 */
            margin-bottom: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            border: 1px solid #e2e8f0;
            flex-shrink: 0; /* 不允许压缩 */
        }
        
        .search-form .layui-form-label {
            background-color: cadetblue;
            color: white;
            border: none;
            border-radius: 6px 0 0 6px;
            font-weight: 500;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .search-form .layui-input,
        .search-form .layui-select {
            border-radius: 0 6px 6px 0;
            border: 1px solid #d1d5db;
            background: rgba(255, 255, 255, 0.95);
            transition: all 0.3s ease;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .search-form .layui-input:focus,
        .search-form .layui-select:focus {
            border-color: cadetblue;
            box-shadow: 0 0 0 3px rgba(95, 158, 160, 0.2);
            outline: none;
        }
        
        /* 按钮样式优化 */
        .btn-primary {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            border: none;
            border-radius: 8px;
            padding: 10px 20px;
            color: white;
            font-weight: 500;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
        }
        
        .btn-success {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            border: none;
            border-radius: 8px;
            padding: 10px 20px;
            color: white;
            font-weight: 500;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
        }
        
        .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
        }
        
        /* 数据表格区域 */
        .table-section {
            background: white;
            border-radius: 12px;
            padding: 18px 22px; /* 稍微减少内边距 */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            border: 1px solid #e2e8f0;
            overflow: hidden;
            min-width: 0;
            flex: 1; /* 占据剩余空间 */
            display: flex;
            flex-direction: column;
        }
        
        .table-title {
            color: #1f2937;
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            padding-bottom: 10px;
            border-bottom: 3px solid #e2e8f0;
            position: relative;
            flex-shrink: 0; /* 不允许压缩 */
        }
        
        .table-title::after {
            content: '';
            position: absolute;
            bottom: -3px;
            left: 0;
            width: 60px;
            height: 3px;
            background: linear-gradient(135deg, cadetblue 0%, #4682b4 100%);
            border-radius: 2px;
        }
        
        .table-title i {
            margin-right: 10px;
            font-size: 20px;
            color: cadetblue;
        }
        
        /* 表格样式 */
        .table-container {
            position: relative;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            width: 100%;
            flex: 1; /* 占据剩余空间 */
            overflow: hidden; /* 表格容器自身不滚动 */
            display: flex;
            flex-direction: column;
        }
        
        .table-container .layui-table-view {
            border: 1px solid #e6e6e6;
            border-radius: 8px;
            min-width: 1100px; /* 从1280px缩小到1100px */
            flex: 1; /* 占据剩余空间 */
            overflow: hidden; /* layui表格视图不滚动 */
        }
        
        .table-container .layui-table-header table,
        .table-container .layui-table-body table {
            width: 100% !important;
            min-width: 1100px; /* 从1280px缩小到1100px */
        }
        
        .table-container .layui-table th {
            background-color: cadetblue !important;
            color: white !important;
            font-weight: 600;
            text-align: center !important;
            padding: 12px 8px !important;
            border-right: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .table-container .layui-table td {
            text-align: center !important;
            vertical-align: middle !important;
            padding: 10px 8px !important;
        }
        
        .table-container .layui-table tbody tr:hover {
            background-color: rgba(95, 158, 160, 0.1) !important;
        }
        
        .table-container .layui-table tbody tr:nth-child(even) {
            background-color: rgba(248, 250, 252, 0.8);
        }
        
        /* 操作按钮样式 */
        .operation-btn {
            display: inline-block;
            padding: 4px 8px;
            margin: 0 2px;
            border-radius: 4px;
            text-decoration: none;
            font-size: 12px;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }
        
        .btn-edit {
            background: #3b82f6;
            color: white;
        }
        
        .btn-edit:hover {
            background: #2563eb;
            transform: translateY(-1px);
        }
        
        .btn-delete {
            background: #ef4444;
            color: white;
        }
        
        .btn-delete:hover {
            background: #dc2626;
            transform: translateY(-1px);
        }
        
        .btn-view {
            background: #8b5cf6;
            color: white;
        }
        
        .btn-view:hover {
            background: #7c3aed;
            transform: translateY(-1px);
        }
        
        /* 状态标签样式 */
        .status-draft {
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 500;
        }
        
        .status-confirmed {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 500;
        }
        
        .status-completed {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 500;
        }
        
        /* 分页样式 */
        #transferTablePagination {
            background: #f8fafc;
            border-radius: 8px;
            padding: 10px 15px;
            margin-top: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            flex-shrink: 0; /* 不允许压缩 */
        }
        
        #transferTablePagination .layui-laypage a:hover {
            background-color: cadetblue;
            color: white;
        }
        
        #transferTablePagination .layui-laypage .layui-laypage-curr .layui-laypage-em {
            background-color: cadetblue;
        }
        
        /* 表格内部滚动优化 */
        .layui-table-body {
            overflow-y: auto !important; /* 允许垂直滚动 */
            overflow-x: auto !important; /* 允许水平滚动 */
        }
        
        .layui-table-header {
            overflow: hidden !important; /* 表头不滚动 */
        }
        
        /* 美化滚动条 */
        .layui-table-body::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        .layui-table-body::-webkit-scrollbar-track {
            background-color: #f1f1f1;
            border-radius: 4px;
        }
        
        .layui-table-body::-webkit-scrollbar-thumb {
            background-color: #c1c1c1;
            border-radius: 4px;
        }
        
        .layui-table-body::-webkit-scrollbar-thumb:hover {
            background-color: #a8a8a8;
        }
        
        /* 确保表格高度自适应 */
        .layui-table-view .layui-table-body {
            max-height: calc(100vh - 300px); /* 动态计算最大高度 */
        }
        
        /* 弹窗样式 */
        .form-section {
            background: white;
            border-radius: 12px;
            padding: 25px;
        }
        
        .auto-generate-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .auto-generate-group input[type="text"] {
            flex: 1;
        }
        
        .layui-form-switch {
            margin-top: 0 !important;
        }
        
        /* 动画效果 */
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }
        
        @@keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
    <div class="main-container fade-in">
        <!-- 搜索表单区域 -->
        <div class="search-section">
            <form class="layui-form search-form" lay-filter="searchForm">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6 layui-col-lg3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">转移单编号</label>
                            <div class="layui-input-block">
                                <input type="text" name="transferCode" placeholder="请输入转移单编号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6 layui-col-lg3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">转移单名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="transferName" placeholder="请输入转移单名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6 layui-col-lg3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">转移单类型</label>
                            <div class="layui-input-block">
                                <select name="transferType" lay-search>
                                    <option value="">请选择转移单类型</option>
                                    <option value="内部转移">内部转移</option>
                                    <option value="外部转移">外部转移</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6 layui-col-lg3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">移出仓库</label>
                            <div class="layui-input-block">
                                <input type="text" name="removeRepository" placeholder="请输入移出仓库名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6 layui-col-lg3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">移入仓库</label>
                            <div class="layui-input-block">
                                <input type="text" name="moveWarehouse" placeholder="请输入移入仓库名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6 layui-col-lg9">
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn btn-primary" lay-submit lay-filter="search">
                                    <i class="layui-icon layui-icon-search"></i> 搜索查询
                                </button>
                                <button type="button" class="layui-btn btn-success" id="btnAdd">
                                    <i class="layui-icon layui-icon-add-1"></i> 新增调拨单
                                </button>
                                <button type="reset" class="layui-btn layui-btn-primary">
                                    <i class="layui-icon layui-icon-refresh"></i> 重置条件
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!-- 数据表格区域 -->
        <div class="table-section">
            <div class="table-title">
                <i class="layui-icon layui-icon-table"></i>
                转移调拨数据列表
            </div>
            <div class="table-container">
                <table class="layui-hide" id="transferTable" lay-filter="transferTable"></table>
            </div>
            <div id="transferTablePagination"></div>
        </div>
    </div>

    <!-- 添加/编辑弹窗 -->
    <div id="addEditForm" style="display: none;">
        <div class="form-section">
            <form class="layui-form" lay-filter="addEditForm">
                <input type="hidden" name="id" />
                
                <div class="layui-form-item">
                    <label class="layui-form-label">转移单编号</label>
                    <div class="layui-input-block">
                        <div class="auto-generate-group">
                            <input type="text" name="transferCode" required lay-verify="required" placeholder="请输入转移单编号" autocomplete="off" class="layui-input">
                            <input type="checkbox" name="autoGenerate" title="自动生成" lay-filter="autoGenerate" lay-skin="switch">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">转移单名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="transferName" required lay-verify="required" placeholder="请输入转移单名称" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-row layui-col-space16">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">转移单类型</label>
                            <div class="layui-input-block">
                                <input type="radio" name="transferType" value="内部转移" title="内部转移" checked>
                                <input type="radio" name="transferType" value="外部转移" title="外部转移">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">转移日期</label>
                            <div class="layui-input-block">
                                <input type="text" name="transferDate" id="transferDate" required lay-verify="required" placeholder="请选择转移日期" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-row layui-col-space16">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">移出仓库</label>
                            <div class="layui-input-block">
                                <select name="removeRepository" lay-verify="required" lay-search>
                                    <option value="">请选择移出仓库</option>
                                    <option value="原材料仓">原材料仓</option>
                                    <option value="产品仓库">产品仓库</option>
                                    <option value="预置仓库">预置仓库</option>
                                    <option value="虚拟线功库">虚拟线功库</option>
                                    <option value="1号仓库">1号仓库</option>
                                    <option value="皮料库">皮料库</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">移入仓库</label>
                            <div class="layui-input-block">
                                <select name="moveWarehouse" lay-verify="required" lay-search>
                                    <option value="">请选择移入仓库</option>
                                    <option value="原材料仓">原材料仓</option>
                                    <option value="产品仓库">产品仓库</option>
                                    <option value="预置仓库">预置仓库</option>
                                    <option value="虚拟线功库">虚拟线功库</option>
                                    <option value="1号仓库">1号仓库</option>
                                    <option value="皮料库">皮料库</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">备注信息</label>
                    <div class="layui-input-block">
                        <textarea name="remark" placeholder="请输入备注信息（可选）" class="layui-textarea" rows="3"></textarea>
                    </div>
                </div>

                <div class="layui-form-item" style="text-align: center; margin-top: 30px;">
                    <button class="layui-btn btn-primary" lay-submit lay-filter="addEditSubmit">
                        <i class="layui-icon layui-icon-ok"></i> 确认保存
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary">
                        <i class="layui-icon layui-icon-refresh"></i> 重置表单
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 操作列模板 -->
    <script type="text/html" id="operationTpl">
        <a href="javascript:;" class="operation-btn btn-edit" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i> 修改
        </a>
        <a href="javascript:;" class="operation-btn btn-delete" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i> 删除
        </a>
        <a href="javascript:;" class="operation-btn btn-view" lay-event="view">
            <i class="layui-icon layui-icon-about"></i> 查看
        </a>
    </script>

    <!-- 状态模板 -->
    <script type="text/html" id="stateTpl">
        {{# if(d.transferState == 0) { }}
            <span class="status-draft">草稿</span>
        {{# } else if(d.transferState == 1) { }}
            <span class="status-confirmed">已确认</span>
        {{# } else if(d.transferState == 2) { }}
            <span class="status-completed">已完成</span>
        {{# } else { }}
            <span class="layui-badge layui-badge-rim">未知</span>
        {{# } }}
    </script>

    <script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>
    <script>
        layui.use(['table', 'form', 'layer', 'laydate'], function() {
            var table = layui.table,
                form = layui.form,
                layer = layui.layer,
                laydate = layui.laydate,
                $ = layui.jquery;

            // 初始化日期选择器
            laydate.render({
                elem: '#transferDate',
                type: 'date',
                theme: 'cadetblue'
            });

            // 数据表格
            var tableIns = table.render({
                elem: '#transferTable',
                url: '/WarehouseManagement/TransferTransfers/GetList',
                method: 'GET',
                page: {
                    elem: '#transferTablePagination',
                    layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
                    groups: 3,
                    first: '首页',
                    last: '尾页'
                },
                limit: 10,
                limits: [10, 20, 50],
                loading: true,
                even: true,
                height: 'full-120', // 自适应高度，减去分页区域高度
                autoSort: false,
                cols: [[
                    {type: 'numbers', title: '序号', width: 70, align: 'center'},
                    {field: 'transferCode', title: '转移单编号', width: 170, sort: true, align: 'center'},
                    {field: 'transferName', title: '转移单名称', width: 110, align: 'center'},
                    {field: 'transferType', title: '转移单类型', width: 100, align: 'center'},
                    {field: 'removeRepository', title: '移出仓库', width: 110, align: 'center'},
                    {field: 'moveWarehouse', title: '移入仓库', width: 110, align: 'center'},
                    {field: 'transferDate', title: '转移日期', width: 100, align: 'center', templet: function(d) {
                        if (d.transferDate) {
                            return new Date(d.transferDate).toLocaleDateString();
                        }
                        return '';
                    }},
                    {field: 'transferState', title: '单据状态', width: 90, align: 'center', templet: '#stateTpl'},
                    {field: 'remark', title: '备注信息', width: 140, align: 'center'},
                    {title: '操作', width: 130, toolbar: '#operationTpl', align: 'center',}
                ]],
                done: function(res, curr, count) {
                    if (res.code !== 0) {
                        layer.msg('数据加载失败：' + res.msg, {icon: 2});
                    }
                },
                text: {
                    none: '<div style="text-align: center; color: #999; padding: 20px;">暂无数据<br>点击"新增调拨单"开始使用</div>'
                }
            });

            // 搜索功能
            form.on('submit(search)', function(data) {
                var loadIndex = layer.load(1, {shade: [0.1,'#fff']});
                tableIns.reload({
                    where: data.field,
                    page: {
                        curr: 1
                    },
                    done: function() {
                        layer.close(loadIndex);
                        layer.msg('搜索完成', {icon: 1, time: 1000});
                    }
                });
                return false;
            });

            // 新增按钮
            $('#btnAdd').on('click', function() {
                openAddEditDialog();
            });

            // 自动生成编号开关
            form.on('switch(autoGenerate)', function(data) {
                if (data.elem.checked) {
                    generateCode();
                } else {
                    $('input[name="transferCode"]').val('');
                }
            });

            // 表格工具栏事件
            table.on('tool(transferTable)', function(obj) {
                var data = obj.data;
                if (obj.event === 'edit') {
                    openAddEditDialog(data);
                } else if (obj.event === 'del') {
                    layer.confirm('确定删除该转移调拨记录吗？<br><span style="color: #f56c6c;">此操作不可撤销</span>', {
                        icon: 3,
                        title: '删除确认',
                        btn: ['确认删除', '取消']
                    }, function(index) {
                        deleteRecord(data.id);
                        layer.close(index);
                    });
                } else if (obj.event === 'view') {
                    viewDetail(data);
                }
            });

            // 表单提交
            form.on('submit(addEditSubmit)', function(data) {
                var formData = data.field;
                var isEdit = formData.id && formData.id > 0;
                
                var url = isEdit ? `/WarehouseManagement/TransferTransfers/Update/${formData.id}` : '/WarehouseManagement/TransferTransfers/Create';
                var method = isEdit ? 'PUT' : 'POST';
                
                var loadIndex = layer.load(1, {shade: [0.3,'#000']});
                
                $.ajax({
                    url: url,
                    method: method,
                    contentType: 'application/json',
                    data: JSON.stringify(formData),
                    success: function(res) {
                        layer.close(loadIndex);
                        if (res.code === 0) {
                            layer.msg(res.msg, {icon: 1, time: 2000});
                            layer.closeAll('page');
                            tableIns.reload();
                        } else {
                            layer.msg(res.msg, {icon: 2, time: 3000});
                        }
                    },
                    error: function() {
                        layer.close(loadIndex);
                        layer.msg('网络错误，操作失败', {icon: 2, time: 3000});
                    }
                });
                return false;
            });

            // 打开添加/编辑对话框
            function openAddEditDialog(data) {
                var title = data ? '<i class="layui-icon layui-icon-edit"></i> 编辑转移调拨' : '<i class="layui-icon layui-icon-add-1"></i> 新增转移调拨';
                var layerIndex = layer.open({
                    type: 1,
                    title: title,
                    area: ['700px', '650px'],
                    content: $('#addEditForm'),
                    shade: [0.3, '#000'],
                    success: function() {
                        if (data) {
                            // 编辑模式，填充数据
                            form.val('addEditForm', data);
                            if (data.transferDate) {
                                var date = new Date(data.transferDate);
                                $('#transferDate').val(date.toISOString().split('T')[0]);
                            }
                        } else {
                            // 新增模式，重置表单并设置默认值
                            document.querySelector('form[lay-filter="addEditForm"]').reset();
                            form.val('addEditForm', {
                                transferType: '内部转移'
                            });
                            // 设置默认日期为今天
                            $('#transferDate').val(new Date().toISOString().split('T')[0]);
                            // 自动生成开关默认关闭
                            $('input[name="autoGenerate"]').prop('checked', false);
                        }
                        form.render();
                    }
                });
            }

            // 生成编号 - TR+年月日时分秒
            function generateCode() {
                var now = new Date();
                var year = now.getFullYear();
                var month = String(now.getMonth() + 1).padStart(2, '0');
                var day = String(now.getDate()).padStart(2, '0');
                var hour = String(now.getHours()).padStart(2, '0');
                var minute = String(now.getMinutes()).padStart(2, '0');
                var second = String(now.getSeconds()).padStart(2, '0');
                
                var code = 'TR' + year + month + day + hour + minute + second;
                $('input[name="transferCode"]').val(code);
                layer.msg('编号生成成功', {icon: 1, time: 1000});
            }

            // 删除记录
            function deleteRecord(id) {
                var loadIndex = layer.load(1, {shade: [0.3,'#000']});
                $.ajax({
                    url: `/WarehouseManagement/TransferTransfers/Delete/${id}`,
                    method: 'DELETE',
                    success: function(res) {
                        layer.close(loadIndex);
                        if (res.code === 0) {
                            layer.msg(res.msg, {icon: 1, time: 2000});
                            tableIns.reload();
                        } else {
                            layer.msg(res.msg, {icon: 2, time: 3000});
                        }
                    },
                    error: function() {
                        layer.close(loadIndex);
                        layer.msg('删除失败', {icon: 2, time: 3000});
                    }
                });
            }

            // 查看详情
            function viewDetail(data) {
                var content = `
                    <div style="padding: 20px; line-height: 2;">
                        <div class="layui-row">
                            <div class="layui-col-md6">
                                <p><strong>转移单编号：</strong>${data.transferCode || ''}</p>
                                <p><strong>转移单名称：</strong>${data.transferName || ''}</p>
                                <p><strong>转移单类型：</strong>${data.transferType || ''}</p>
                                <p><strong>移出仓库：</strong>${data.removeRepository || ''}</p>
                                <p><strong>移入仓库：</strong>${data.moveWarehouse || ''}</p>
                            </div>
                            <div class="layui-col-md6">
                                <p><strong>转移日期：</strong>${data.transferDate ? new Date(data.transferDate).toLocaleDateString() : ''}</p>
                                <p><strong>单据状态：</strong>${getStatusText(data.transferState)}</p>
                                <p><strong>创建时间：</strong>${data.creationTime ? new Date(data.creationTime).toLocaleString() : ''}</p>
                                <p><strong>最后修改：</strong>${data.lastModificationTime ? new Date(data.lastModificationTime).toLocaleString() : ''}</p>
                                <p><strong>备注信息：</strong>${data.remark || '无'}</p>
                            </div>
                        </div>
                    </div>
                `;
                
                layer.open({
                    type: 1,
                    title: '<i class="layui-icon layui-icon-about"></i> 转移调拨详情',
                    area: ['600px', '400px'],
                    content: content,
                    shade: [0.3, '#000']
                });
            }

            // 获取状态文本
            function getStatusText(state) {
                switch(state) {
                    case 0: return '<span style="color: #f59e0b;">草稿</span>';
                    case 1: return '<span style="color: #3b82f6;">已确认</span>';
                    case 2: return '<span style="color: #10b981;">已完成</span>';
                    default: return '<span style="color: #6b7280;">未知</span>';
                }
            }
        });
    </script>
</body>
</html>
